// import React from 'react'
// import ReactDOM from 'react-dom'

class Element {
  constructor(type, props, children) {
    this.type = type
    this.props = props || {};
    this.children = children
  }
  trs(str) {
    return str.replace(/[A-Z]/g, k => {
      return '-' + k.toLowerCase()
    })
  }
  render() {
    // 负责把对应的虚拟DOM转成真实DOM
    let ele = document.createElement(this.type)// 创造出一个真实的空的DOM元素
    Object.keys(this.props).forEach(item => {
      // ele.setAttribute(item, this.props[item])
      switch (item) {
        case 'className':
          ele.setAttribute('class', this.props[item])
          break;
        case 'style':
          let str = '';
          let obj = this.props[item];// {color:'red'}
          Object.keys(obj).forEach(k => {
            str += `${this.trs(k)}:${obj[k]};`
          })
          ele.setAttribute('style', str)
        default:
          break;
      }
    })
    // 添加儿子
    this.children.forEach(item => {
      // 儿子就两种情况  字符串   Element的实例
      if (typeof item == 'string') {
        let textNode = document.createTextNode(item);
        ele.appendChild(textNode)
      } else {
        //item是 Element的实例
        ele.appendChild(item.render())
      }
    })

    return ele
  }
}

let React = {
  createElement(type, props, ...children) {
    return new Element(type, props, children)
  }
}
let ReactDOM = {
  render(ele, container) {
    console.log(ele)
    container.appendChild(ele.render())
  }
}


// let ele = <div className='box'>
//   <h1 style={{ color: 'red', fontSize: '19px' }}>hello world</h1>
// </div>
let ele = React.createElement(
  "div",
  {
    className: "box"
  },
  "heheheh",
  /*#__PURE__*/ React.createElement(
    "h1",
    {
      style: {
        color: "red",
        fontSize: "19px"
      }
    },
    "hello world"
  ),
  /*#__PURE__*/ React.createElement("i", null, "aaaa")
);

ReactDOM.render(ele, document.querySelector('#root'))




